<template>
  <div class="container">
    <div class="cheader2">
      <van-icon
          @click="goBack"
          class="chl"
          name="arrow-left"
          color="#000"
          size="20"
      />
      <div class="chtitle">API设置</div>
      <div class="djbox">
        <!-- <img src="@/assets/images/wenhao.png" alt="" />
        <div>对接教程</div> -->
      </div>
    </div>
    <div class="bbox">
      <div
          :class="submitForm.platformId === OKX_ID ? 'bb1 bb2' : 'bb1'"
          @click="choosePlatform(OKX_ID)"
      >
        OKX
      </div>
    </div>
    <div class="ibox1">
      <img
          :src="
          submitForm.platformId === OKX_ID
            ? require('@/assets/images/hok.png')
            : undefined
        "
          alt=""
      />
      <div>{{ submitForm.platformId === OKX_ID ? "OKX" : "other" }}</div>
    </div>
    <div class="ibox2">
      <div class="ili">
        <div class="ili-1">APIKey</div>
        <div class="ili-2">
          <van-field
              v-model="submitForm.apiKey"
              :readonly="(submitForm.platformId === OKX_ID && isAuthObj.okx_isAuth)"
              placeholder="请输入或者粘贴APIKey内容"
          />
        </div>
      </div>
      <div class="ili">
        <div class="ili-1">Secret Key</div>
        <div class="ili-2">
          <van-field
              :readonly="(submitForm.platformId === OKX_ID && isAuthObj.okx_isAuth)"
              v-model="submitForm.secretKey"
              placeholder="请输入或者粘贴Secret Key内容"
          />
        </div>
      </div>
      <div
          class="ili"
          v-if="submitForm.platformId === OKX_ID && !isAuthObj.okx_isAuth"
      >
        <div class="ili-1">PassPhrase Key</div>
        <div class="ili-2">
          <van-field
              type="password"
              v-model="submitForm.password"
              placeholder="请输入或者粘贴PassPhrase Key内容"
          />
        </div>
      </div>
      <div class="tipbox" style="margin-top: 20px">
        <van-icon name="question-o"/>
        <div>获取到APIKey用于同步持仓和交易数据</div>
      </div>
      <div class="tipbox">
        <van-icon name="question-o"/>
        <div>输入或复制粘贴你的APIKey</div>
      </div>
    </div>
    <div
        v-if="(submitForm.platformId === OKX_ID && !isAuthObj.okx_isAuth)"
        class="btn"
        @click="handleSubmit"
    >
      立即授权
    </div>
    <div v-else class="btn gred" @click="handleRemove">解除授权</div>
  </div>
</template>

<script setup lang='ts'>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import http from "@/utils/http";
import {Dialog, Toast} from "vant";
import {useStore} from "@/store";
import {OKX_ID} from "@/utils/common";

const store = useStore();
const router = useRouter();
let isAuthObj = ref({
  okx_isAuth: false,
  okx_apiKey: "",
  okx_id: "",
  okx_secretKey: "",
  okx_password: "",
  okx_platformId: OKX_ID,
});
let submitForm = ref({
  id: "",
  apiKey: "",
  secretKey: "",
  password: "",
  platformId: OKX_ID, //平台id
});
onMounted(() => {
  getApiList();
});
const handleSubmit = () => {
  if (!submitForm.value.apiKey) {
    Toast("请输入apikey");
    return;
  }
  if (!submitForm.value.secretKey) {
    Toast("请输入secretKey");
    return;
  }
  if (submitForm.value.platformId === OKX_ID && !submitForm.value.password) {
    Toast("请输入PassPhrase");
    return;
  }
  http.post("user/user_api/binding", submitForm.value).then((res: any) => {
    if (res.code === 0) {
      Toast("授权成功");
      setTimeout(() => {
        goBack();
      }, 1000);
    }
  });
};
const getApiList = () => {
  http.get("user/user_api/list").then((res: any) => {
    if (res.code === 0) {
      const data = res.data;
      if (data.length === 1) {
        if (data[0].platformId === OKX_ID) {
          isAuthObj.value.okx_isAuth = true;
          isAuthObj.value.okx_apiKey = data[0].apiKey;
          isAuthObj.value.okx_secretKey = data[0].secretKey;
          isAuthObj.value.okx_id = data[0].id;
        }

        submitForm.value.id = data[0].id;
        submitForm.value.platformId = data[0].platformId;
        submitForm.value.apiKey = data[0].apiKey;
        submitForm.value.secretKey = data[0].secretKey;
      } else {
        submitForm.value = {
          id: "",
          apiKey: "",
          secretKey: "",
          password: "",
          platformId: OKX_ID,
        };
        isAuthObj.value = {
          okx_isAuth: false,
          okx_apiKey: "",
          okx_id: "",
          okx_secretKey: "",
          okx_password: "",
          okx_platformId: OKX_ID,
        };
      }
    }
  });
};
const choosePlatform = (id: string) => {
  submitForm.value.apiKey = "";
  submitForm.value.secretKey = "";
  submitForm.value.password = "";
  submitForm.value.platformId = id;
  if (id === OKX_ID) {
    if (isAuthObj.value.okx_isAuth) {
      submitForm.value.apiKey = isAuthObj.value.okx_apiKey;
      submitForm.value.secretKey = isAuthObj.value.okx_secretKey;
      submitForm.value.id = isAuthObj.value.okx_id;
    }
  }
};
const handleRemove = () => {
  Dialog({
    title: "提示",
    showCancelButton: true,
    message: `解除${
        submitForm.value.platformId === OKX_ID ? "OKX" : "other"
    }授权?`,
  })
      .then(() => {
        http
            .delete(`user/user_api/binding?id=${submitForm.value.id}`)
            .then((res: any) => {
              if (res.code === 0) {
                Toast("解除成功");
                getApiList();
              }
            });
      })
      .catch(() => {
        // on cancel
      });
};
const goBack = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.cheader2 {
  z-index: 1001;
  width: 100%;
  height: 45px;
  background-color: #fff;
  font-size: 16px;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;

  .chl {
    position: absolute;
    left: 16px;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
  }

  .chtitle {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .djbox {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;

    img {
      width: 16px;
      margin-right: 4px;
    }

    div {
      font-size: 13px;
      color: #878b97;
    }
  }
}

.ibox1 {
  // margin-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 120px;

  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 6px;
  }

  div {
    font-size: 12px;
    color: #000;
    text-align: center;
  }
}

.ibox2 {
  margin: 10px 20px;

  .ili {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;

    .ili-1 {
      font-size: 12px;
      color: #000;
      margin-bottom: 10px;
    }

    .ili-2 {
      background-color: #f1f1f1;
      border-radius: 4px;
      height: 38px;
    }
  }
}

.tipbox {
  display: flex;
  align-items: center;
  height: 24px;

  img {
    width: 12px;
    margin-right: 4px;
  }

  div {
    font-size: 11px;
    color: #333;
  }
}

.btn {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  background: #36b4ea;
  border-radius: 3px;
  margin: 60px 20px 20px;
}

.gred {
  background-color: #e45360 !important;
}

.bbox {
  margin-top: 45px;
  display: flex;
  padding: 10px 20px;

  .bb1 {
    width: 90px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: #f1f1f1;
    color: #878b97;
    border-radius: 3px;
    margin-right: 10px;
    font-weight: 600;

    &.bb2 {
      color: #fff;
      background: #36b4ea;
    }
  }
}
</style>
